<template>
	<cxView display="flex" :width="widthCompute" :height="height" :borderRadius="borderRadius" :border="border"
		flexDirection="row" :margin="margin" :padding="$addUnit(padding)">

		<cxView display="flex" justifyContent="center" height="100%" alignItems="center" :customStyle="defaultStyle"
			:selectStyle="item.selected ? selectStyle : null" :width="itemWidth" :borderRadius="itemBorderRadius"
			:size="size" @confirm="selectItem(item)" v-for="item in switchArr" :key="item.key">
			{{item.value}}
		</cxView>

	</cxView>

</template>

<script>
	export default {
		name: "cxSwitch",
		data() {
			return {
				switchArr: [],
				defaultStyle: {
					color: '#1D8BE8'
				},
				selectStyle: {
					color: 'white',
					background: '#1D8BE8',

				}
			}
		},
		computed: {
			itemWidth() {
				let width = parseInt(this.width) / 2 - (parseInt(this.padding)) - (parseInt(this.correction) * 2)
				return width;
			},
			itemBorderRadius() {
				return this.height / 2;
			},
			widthCompute() {
				return this.width;
			},
			borderColorCompute() {

				// if(!this.borderColor){
				// 	this.borderColor = this.selectedColor;
				// }
				return this.borderColor;
			}
		},

		methods: {
			selectItem(info) {
				if (info.selected === false) {
					for (const item of this.switchArr) {
						if (info.key === item.key) {
							item.selected = true
							this.$emit('switchValue', item)
						} else {
							item.selected = false
						}
					}
				}
			},
		},
		created() {
			for (let i = 0; i < 2; i++) {
				const arrItem = {
					key: this.switchList[i].key,
					value: this.switchList[i].value,
					selected: this.defaultValue == this.switchList[i].key ? true : false
				}

				// if (this.switchList[i].key === this.defaultValue) {
				// 	this.$emit('switchValue', arrItem)
				// }
				this.switchArr.push(arrItem)
			}

			this.selectStyle.background = this.selectedBgColor;
			this.selectStyle.color = this.titleSelectColor;

			this.defaultStyle.color = this.titleColor;
			this.defaultStyle.background = this.titleSelectColor;
		},
		props: {
			defaultValue: {
				type: [Number,String],
				default: '0'
			},
			switchList: {
				type: Array,
				default () {
					return [{
							key: 0,
							value: '是'
						},
						{
							key: 1,
							value: '否'
						}
					]
				}
			},
			width: {
				type: String,
				default: "240"
			},

			height: {
				type: String,
				default: "80"
			},
			borderRadius: {
				type: String,
				default: "50vw"
			},

			selectedColor: {
				type: String,
				default: "#333"
			},
			selectedBgColor: {
				type: String,
				default: "#1D8BE8"
			},
			margin: {
				type: String,
				default: ""
			},
			size: {
				type: String,
				default: "28"
			},
			padding: {
				type: String,
				default: ""
			},

			border: {
				type: String,
				default: ""
			},
			titleColor: {
				type: String,
				default: ""
			},
			titleSelectColor: {
				type: String,
				default: ""
			},
			/**
			 * 修正值，一般为border，宽度的2倍
			 */
			correction: {
				type: String,
				default: "0"
			}
		},
	}
</script>

<style>



</style>